<template>
    <div class="view_tracker_order">
        <card title="传感器订单">
            <template #actions>
                <el-select class="w-28" v-model="queryTrackerOrderType" placeholder="订单类型" clearable>
                    <el-option v-for="(val, key) in trackerOrderTypes" :key="key" :value="key" :label="val.text" />
                </el-select>
                <el-select class="w-28" v-model="queryBy">
                    <el-option v-for="(val, key) in queryBySomething" :key="key" :value="key" :label="val" />
                </el-select>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    :placeholder="placeholder"
                    prefix-icon="el-icon-search"
                    clearable
                />
            </template>

            <template #default>
                <el-table :data="tableData">
                    <el-table-column type="index" label="#" align="center" />
                    <el-table-column prop="shopName" label="店铺名" />
                    <el-table-column prop="trackerOrderSn" label="订单号" width="192" />
                    <el-table-column prop="quantity" label="数量" />
                    <el-table-column prop="price" label="单价/元" :formatter="priceFormatter" />
                    <el-table-column prop="orderAmount" label="应付/元" :formatter="priceFormatter" />
                    <el-table-column label="类型">
                        <template #default="{ row: { orderType } }">
                            <el-tag :type="trackerOrderTypes[orderType].tagType">
                                {{ trackerOrderTypes[orderType].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template #default="{ row: { orderStatus } }">
                            <el-tag effect="dark" :type="trackerOrderStatus[orderStatus].tagType">
                                {{ trackerOrderStatus[orderStatus].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button type="text" @click="viewTrackerOrderDetails(row.trackerOrderId)">
                                查看详情
                            </el-button>
                            <el-button type="text" v-if="row.orderStatus === 1" @click="openTrackerDeliveryDialog(row)">
                                发货
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>

        <!-- 订单详情对话框 -->
        <el-dialog :visible.sync="visible" custom-class="order_details_dialog">
            <template #default>
                <div class="desc_list">
                    <div class="desc_list-top">
                        <h3 class="desc_list-title">{{ trackerOrderDetails.trackerOrderSn }}</h3>
                        <p class="desc_list-subtitle">店铺名：{{ trackerOrderDetails.shopName }}</p>
                    </div>
                    <dl class="desc_list-content">
                        <div class="desc_list-item">
                            <dt>单价</dt>
                            <dd>{{ priceFormatter(0, 0, trackerOrderDetails.price) }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>数量</dt>
                            <dd>{{ trackerOrderDetails.quantity }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>总价</dt>
                            <dd>{{ priceFormatter(0, 0, trackerOrderDetails.orderAmount) }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>订单类型</dt>
                            <dd>
                                <el-tag :type="trackerOrderTypes[trackerOrderDetails.orderType].tagType">
                                    {{ trackerOrderTypes[trackerOrderDetails.orderType].text }}
                                </el-tag>
                            </dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>订单状态</dt>
                            <dd>
                                <el-tag :type="trackerOrderStatus[trackerOrderDetails.orderStatus].tagType">
                                    {{ trackerOrderStatus[trackerOrderDetails.orderStatus].text }}
                                </el-tag>
                            </dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>创建时间</dt>
                            <dd>{{ trackerOrderDetails.createTime }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>收货人</dt>
                            <dd>{{ trackerOrderDetails.receiverName }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>联系电话</dt>
                            <dd>{{ trackerOrderDetails.receiverPhone }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>收货地址</dt>
                            <dd>{{ trackerOrderDetails.receiverAddress }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>物流名称</dt>
                            <dd>{{ trackerOrderDetails.deliveryCompany }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>物流单号</dt>
                            <dd>{{ trackerOrderDetails.deliverySn }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>发货时间</dt>
                            <dd>{{ trackerOrderDetails.deliveryTime | formatTimeStamp }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>支付方式</dt>
                            <dd>{{ trackerOrderPaymentMethods[trackerOrderDetails.payType] }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>实付金额</dt>
                            <dd>{{ trackerOrderDetails.payAmount }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>付款凭证</dt>
                            <dd>{{ trackerOrderDetails.payVoucher }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>支付时间</dt>
                            <dd>{{ trackerOrderDetails.payTime }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>传感器列表</dt>
                            <el-table :data="trackerOrderDetails.vidList">
                                <el-table-column type="index" label="#" align="center" />
                                <el-table-column prop="trackerVid" label="传感器VID" />
                                <el-table-column prop="trackerStatus" label="状态">
                                    <template #default="{ row }">
                                        {{ trackerStatus[row.trackerStatus] }}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </dl>
                </div>
            </template>
        </el-dialog>

        <!-- 传感器发货对话框 -->
        <el-dialog :visible.sync="visible2" title="传感器发货" custom-class="delivery_dialog">
            <template #default>
                <el-alert>
                    <p>必须是以8开头的15位数字，以英文逗号分隔，或回车换行</p>
                </el-alert>
                <el-alert type="success">
                    <p>当前订单需要{{ currentOrderTrackerQuantify }}个传感器</p>
                </el-alert>
                <div class="input_box">
                    <label class="input_box-label">物流公司</label>
                    <input class="input_box-control" type="text" v-model="trackerDeliveryFormData.deliveryCompany" />
                </div>
                <div class="input_box">
                    <label class="input_box-label">物流单号</label>
                    <input class="input_box-control" type="text" v-model="trackerDeliveryFormData.deliverySn" />
                </div>
                <div class="input_box">
                    <label class="input_box-label">传感器</label>
                    <textarea class="input_box-control" v-model="trackerDeliveryFormData.trackerVid" rows="5" />
                </div>
            </template>
            <template #footer>
                <el-button type="primary" @click="deliverTrackers">发货</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getQueryOptions } from '../../mixins';
import { formatTimeStamp } from '../../functions';

// 查询类型
const queryTypes = {
    trackerVid: '传感器VID',
    trackerOrderSn: '订单号',
};

export default {
    data() {
        return {
            tableData: [],

            visible: false,
            visible2: false,

            trackerOrderDetails: {},

            trackerDeliveryFormData: {
                trackerVid: '',
                deliverySn: '',
                deliveryCompany: '',
            },
            // 多个投递的传感器
            multipleDeliveredTrackers: [],

            queryTrackerOrderType: '',
            queryBy: 'trackerVid',

            // 当前订单需要的传感器数量
            currentOrderTrackerQuantify: 0,

            // 价格格式化器
            priceFormatter(row, column, cellValue) {
                return cellValue / 100;
            },
        };
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/platform/findTrackerOrder',
            paginable: true,
            params: {
                queryString: 'queryBy',
                queryTrackerOrderType: 'orderType',
            },
        }),
    ],

    filters: { formatTimeStamp },

    computed: {
        // 按某物查询
        queryBySomething() {
            return {
                trackerVid: '传感器VID',
                trackerOrderSn: '订单号',
            };
        },

        // 搜索框占位符
        placeholder() {
            return `按${this.queryBySomething[this.queryBy]}查询`;
        },

        // >>>>> 传感器订单常量
        // 传感器订单类型
        trackerOrderTypes() {
            return {
                1: { text: '免租' },
                2: { text: '押金', tagType: 'success' },
                3: { text: '补货', tagType: 'warning' },
                4: { text: '退货', tagType: 'danger' },
            };
        },

        // 传感器订单状态
        trackerOrderStatus() {
            return {
                1: { text: '待发货', tagType: 'warning' },
                2: { text: '已发货', tagType: 'success' },
                3: { text: '已完成', tagType: 'success' },
                4: { text: '待付款' },
                5: { text: '已关闭', tagType: 'info' },
                6: { text: '已取消', tagType: 'info' },
                7: { text: '已退款', tagType: 'danger' },
            };
        },

        // 传感器订单支付方式
        trackerOrderPaymentMethods() {
            return {
                1: '支付宝',
                2: '微信',
            };
        },

        // 订单详情传感器状态
        trackerStatus() {
            return {
                1: '未使用',
                2: '已使用',
                3: '已退',
            };
        },
        // 跟踪器订单状态常量 <<<<<
    },

    methods: {
        // 查看跟踪器订单详情
        viewTrackerOrderDetails(trackerOrderId) {
            this.$get('/yxl/platform/findTrackerOrderDetails', { trackerOrderId }).then(res => {
                this.trackerOrderDetails = res;

                this.visible = true;
            });
        },

        // 打开传感器发货对话框
        openTrackerDeliveryDialog({ trackerOrderId, quantity }) {
            this.trackerDeliveryFormData.trackerOrderId = trackerOrderId;
            this.currentOrderTrackerQuantify = quantity;
            this.visible2 = true;
        },

        // 关闭传感器发货对话框
        closeTrackerDeliveryDialog() {},

        // 添加投递的传感器
        addDeliveredTracker() {
            this.multipleDeliveredTrackers.push('');
        },

        // 删除投递的传感器
        deleteDeliveredTracker(ind) {
            this.multipleDeliveredTrackers.splice(ind, 1);
        },

        // 投递传感器（发货）
        deliverTrackers() {
            let data = Object.assign({}, this.trackerDeliveryFormData);

            if (data.trackerVid.includes('\n') && data.trackerVid.includes(',')) {
                this.$message.error('回车换行不需要带逗号');
                return;
            }
            // 换行替换为逗号
            data.trackerVid = data.trackerVid.trim().replace(/\n/g, ',');
            // if (data.trackerVid.split(',').length !== this.currentOrderTrackerQuantify) {
            //     this.$message.error('发货数量错误');
            //     return;
            // }

            if (/^(8\d{14},?)+\b$/.test(data.trackerVid)) {
                this.$put('/yxl/platform/saveTrackerDelivery', data).then(res => {
                    this.visible2 = false;
                    this.query();
                });
            } else {
                this.$message.error('传感器vid格式不正确');
            }
        },
    },

    watch: {
        queryTrackerOrderType: 'query',
    },
};
</script>